<template>

  <div class="parameter-tag-main">
    <div class="pp-t-96">
      <h3 class="fw-b fs-14">标签管理</h3>
      <!-- 筛选条件与查询 -->
      <a-form-model layout="inline" :model="search">
        <a-row :gutter="16">
          <a-col :span="4">
            <a-form-model-item label="" style="width: 100%">
              <a-input
                v-model="search.labelName"
                style="width: 100%"
                placeholder="参数标签名称"
              >
                <a-icon slot="suffix" :component="require('@/assets/icon/search.svg')" @click="handleTableChange({current:1})" />
              </a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="4">
            <a-form-model-item label="" style="width: 100%">
              <airModel v-model="search.model" @change="handleTableChange({current:1})" />
            </a-form-model-item>
          </a-col>
          <a-col :span="4">
            <a-form-model-item label="" style="width: 100%">
              <a-select
                v-model="search.smi"
                style="width: 100%"
                placeholder="一级分类"
                allow-clear
                @change="(v)=>{
                  getImiListHanlder(v,false)
                  handleTableChange({current:1})
                }"
              >
                <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
                <a-select-option v-for="selectItem in firstClassClassificationList" :key="selectItem.id" :value="selectItem.name">
                  {{ selectItem.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>

          <a-col :span="4">
            <a-form-model-item label="" style="width: 100%">
              <a-select
                v-model="search.imi"
                style="width: 100%"
                placeholder="二级分类"
                allow-clear
                @change="handleTableChange({current:1})"
              >
                <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
                <a-select-option v-for="selectItem in secondaryClassificationList" :key="selectItem.id" :value="selectItem.name">
                  {{ selectItem.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="4">
            <a-form-model-item label="" style="width: 100%">
              <a-input
                v-model="search.groupName"
                style="width: 100%"
                placeholder="分组名称"
              >
                <a-icon slot="suffix" :component="require('@/assets/icon/search.svg')" @click="handleTableChange({current:1})" />
              </a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="4">
            <a-form-model-item>
              <a-button type="default" ghost :loading="repReportParamLabelListLoading" @click="resetSearchHandler">
                重置
              </a-button>

            </a-form-model-item>
          </a-col>
        </a-row>

      </a-form-model>
    </div>
    <!-- table -->
    <a-spin :spinning="repReportParamLabelListLoading" class="pp-rb-box">
      <a-button type="primary" ghost :loading="repReportParamLabelListLoading" @click="addVisible=true">
        新增
      </a-button>
      <a-table
        :columns="columns"
        :data-source="repReportParamLabelList"
        :row-key="(row,index) =>row.id+index"
        :pagination="{
          showTotal:(total)=> `共 ${total} 条数据`,
          showSizeChanger: true,//设置每页显示数据条数
          showQuickJumper: true,
          size:'big',
          current:pagination.pageNum,
          pageSize:pagination.pageSize,
          total:pagination.total
        }"
        style="margin-top:15px"
        @change="handleTableChange"
      />
      <!-- <vxe-table
        ref="xTable1"
        class="mt-10"
        show-overflow
        highlight-hover-row
        :data="repReportParamLabelList"
        height="745"
        :sort-config="{trigger: 'cell'}"
      >
        <vxe-table-column field="labelName" title="标签名" width="100" />
        <vxe-table-column field="groupName" title="分组名称" />
        <vxe-table-column field="smi" title="smi" />
        <vxe-table-column field="imi" title="imi" />
        <vxe-table-column field="model" title="机型" show-overflow />
        <vxe-table-column field="width" title="标签长度" show-overflow />
        <vxe-table-column title="操作" width="100" show-overflow>
          <template #default="{ row }">

              <a-button type="primary" ghost size="small" @click="editEventHandler(row)">
                编辑
              </a-button>
          </template>
        </vxe-table-column>
      </vxe-table> -->
    </a-spin>

    <!-- add -->

    <a-modal
      v-model="addVisible"
      :mask-closable="false"
      title=""
      class="rt-i-modal"
      :width="520"
      :confirm-loading="addRepReportParamLabelLoading"
      @ok="addConfirmHandler"
      @cancel="cancelHandler"
    >
      <span slot="closeIcon" class="c-dialog-close-icon"><a-icon :component="require('@/assets/icon/close.svg')" /></span>
      <div class="c-dialog-title fw-500">{{ addTitle }}参数标签</div>
      <a-form-model
        ref="addForm"
        :model="addForm"
        class="rt-i-modal"
        :rules="addRules"
      >
        <a-form-model-item label="参数标签名称" prop="name">
          <a-input v-model="addForm.name" class="input-type-o" placeholder="参数标签名称" style="width: 100%" />
        </a-form-model-item>

        <a-form-model-item label="一级分类" prop="smi">
          <a-select
            v-model="addForm.smi"
            class="input-type-o"
            style="minWidth: 130px"
            placeholder="一级分类"
            allow-clear
            @change="(v)=>getImiListHanlder(v,true)"
          >
            <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
            <a-select-option v-for="selectItem in firstClassClassificationList" :key="selectItem.id" :value="selectItem.name">
              {{ selectItem.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>

        <a-form-model-item label="二级分类" prop="imi">
          <a-select
            v-model="addForm.imi"
            style="minWidth: 130px"
            placeholder="二级分类"
            allow-clear
            class="input-type-o"
            @change="(v)=>getGroupList(v)"
          >
            <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
            <a-select-option v-for="selectItem in secondaryClassificationListModel" :key="selectItem.id" :value="selectItem.name">
              {{ selectItem.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="分组名称" prop="groupName">
          <a-select
            v-model="addForm.groupName"
            style="minWidth: 130px"
            placeholder="分组名称"
            allow-clear
            class="input-type-o"
          >
            <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
            <a-select-option v-for="selectItem in repReportParamGroupList" :key="selectItem.id" :value="selectItem.name">
              {{ selectItem.name }}
            </a-select-option>
          </a-select>

        </a-form-model-item>
        <a-form-model-item label="标签长度" prop="width">
          <a-input-number v-model="addForm.width" class="input-type-o" placeholder="标签长度" style="width: 100%" />
        </a-form-model-item>
        <a-form-model-item label="机型" prop="model">
          <airModel v-model="addForm.model" class="input-type-o" />
        </a-form-model-item>
        <a-form-model-item prop="description">
          <span slot="label">标签详情<span class="text-color-9ea5b2 fs-12">选填</span></span>
          <a-textarea
            v-model="addForm.description"
            class="input-type-o"
            placeholder="标签详情"
            style="width: 100%"
            :auto-size="{ minRows: 5, maxRows: 8 }"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import rowClass from '@/pages/common/rowClass';
import getSmiAndModel from '../getSmiAndModel';
import { mapState, mapActions, mapMutations } from 'vuex';
import airModel from '@/pages/components/airModel';
export default {
  components: {
    airModel
  },
  mixins: [rowClass, getSmiAndModel],
  data() {
    return {
      search: {},
      addVisible: false,
      addForm: {},
      addTitle: '新增',
      columns: Object.freeze([
        {
          title: '标签名',
          dataIndex: 'labelName',
          customRender: (value, record) => {
            return value || '--';
          }
        },
        {
          title: '分组名称',
          dataIndex: 'groupName',
          customRender: (value, record) => {
            return value || '--';
          }
        },
        {
          title: 'smi',
          dataIndex: 'smi',
          customRender: (value, record) => {
            return value || '--';
          }
        },
        {
          title: 'imi',
          dataIndex: 'imi',
          customRender: (value, record) => {
            return value || '--';
          }
        },
        {
          title: '机型',
          dataIndex: 'model',
          customRender: (value, record) => {
            return value || '--';
          }
        },
        {
          title: '标签长度',
          dataIndex: 'width',
          customRender: (value, record) => {
            return value || '--';
          }
        },
        // {
        //   title: '标签长度',
        //   dataIndex: 'width',
        //   customRender: (value, record) => {
        //     return value || '--';
        //   }
        // },
        {
          title: '操作',
          width: 120,
          customRender: (value, record, index) => {
            const { id } = record;
            return [
              <a-popconfirm
                title='确认删除此项?'
                ok-type='danger'
                ok-text='确认'
                cancel-text='取消'
                onConfirm={() => this.delEventHandler(id)}
              >

                <a-button size='small' type='link'>删除</a-button>
              </a-popconfirm>,

              <a-button size='small' type='link' onClick={() => this.editEventHandler(record)}>修改</a-button>

            ];
          }
        }
      ]),
      addRules: Object.freeze({
        name: [
          { required: true, message: '请填写', trigger: 'change' }
        ],
        groupName: [
          { required: true, message: '请填写', trigger: 'change' }
        ],
        width: [
          { required: true, type: 'number', message: '请填写', trigger: 'change' }
        ],
        smi: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        imi: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        model: [
          { required: true, message: '请选择', trigger: 'change' }
        ]
      })
    };
  },
  computed: {
    ...mapState('parameterTag', [
      'addRepReportParamLabelLoading',
      'repReportParamLabelListLoading',
      'repReportParamLabelList',
      'pagination'
    ]),
    ...mapState('groupManagement', [
      'repReportParamGroupList'
    ])
  },
  watch: {
    search: {
      handle(nv) {

      },
      deep: true
    }
  },
  mounted() {
    // 获取一级分类
    this.getSmiList();
    this.getData();
  },
  methods: {
    ...mapActions('parameterTag', [
      'getRepReportParamLabelList',
      'addRepReportParamLabel',
      'modifyRepReportParamLabel',
      'updateDeleted'
    ]),
    ...mapMutations('parameterTag', [
      'setState'
    ]),
    ...mapMutations('groupManagement', {
      'setGMState': 'setState'
    }),
    ...mapActions('groupManagement', [
      'getRepReportParamGroupList'
    ]),
    // 重置
    resetSearchHandler() {
      this.search = {};
      this.handleTableChange({ current: 1, pageSize: this.pagination.pageSize });
    },
    addConfirmHandler() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.addForm.groupId = this.repReportParamGroupList.find(item => item.name === this.addForm.groupName)?.id;
          const params = { ...this.addForm, length: this.addForm.width };
          if (this.addForm.id) {
            this.modifyRepReportParamLabel(params).then((rep) => {
              if (rep) {
                this.addVisible = false;
                this.cancelHandler();
                this.getData();
              }
            });
          } else {
            this.addRepReportParamLabel(params).then((rep) => {
              if (rep) {
                this.addVisible = false;
                this.cancelHandler();
                this.getData();
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    handleTableChange({ current, pageSize = 10 }) {
      this.setState({ key: 'pagination', payload: { ...this.pagination, pageNum: current, pageSize: pageSize }});
      this.getData();
    },
    cancelHandler() {
      this.addForm = {};
      this.addTitle = '新增';
      this.$refs.addForm.resetFields();
      this.setGMState({ key: 'repReportParamGroupList', payload: [] });
    },
    delEventHandler(id) {
      this.updateDeleted({ id: [id] }).then((rep) => {
        if (rep) {
          this.getData();
        }
      });
    },
    // 编辑
    editEventHandler(row) {
      this.addVisible = true;
      row.width = +row.width;
      this.addForm = { ...row, name: row.labelName };
      this.addTitle = '修改';
      this.getGroupList();
      this.getImiListHanlder(row.smi, true);
    },

    getGroupList() {
      if (!this.addForm.imi) return;
      const params = {
        pageNum: 1,
        pageSize: 1000,
        name: this.addForm.imi
      };

      this.getRepReportParamGroupList(params);
    },

    // 获取table
    getData() {
      this.getRepReportParamLabelList(this.search);
    }
  }
};
</script>

<style lang="less">
@import 'index.less';
</style>
